<template>
  <div>
    <!--卡片视图区域-->
    <el-card>
      <el-row>
        <el-select v-model="selectedCourseId" placeholder="请选择">
          <el-option
            v-for="item in studentCourseList"
            :key="item.courseId"
            :label="item.courseName"
            :value="item.courseId">
          </el-option>
        </el-select>
        <el-button @click="getCourseExperimentList()">查询</el-button>
      </el-row>
      <el-row>
        <el-table
          :data="courseExperimentList" border stripe>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="experId" label="实验编号" width="100"></el-table-column>
          <el-table-column prop="experName" label="实验名称"></el-table-column>
          <!--scope相当于是tableData的一行，与el-table-column唯一对应-->
          <el-table-column prop="difficuty" label="实验难度" width="80px">
            <template v-slot:default="scope">
              <div v-if="scope.row.difficuty === 1">
                <el-tag type="success">基础</el-tag>
              </div>
              <div v-if="scope.row.difficuty === 2">
                <el-tag type="primary">提高</el-tag>
              </div>
              <div v-if="scope.row.difficuty === 3">
                <el-tag type="warning">综合</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column>
          <el-table-column prop="endTime" label="截止时间" width="100"></el-table-column>
          <el-table-column prop="company" label="完成情况" width="80"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="查看实验要求" placement="top" :enterable="false">
                <el-button class="upload-demo" type="primary" icon="el-icon-view" size="small"></el-button>
              </el-tooltip>
              <el-upload class="upload-demo"
                :action="previewUploadUrl"
                :data="{experId: scope.row.experId}"
                :headers="headers"
                :before-upload="beforeUpload"
                :on-success="onSuccess"
                :show-file-list="false"
                :file-list="previewFileList">
              <el-tooltip effect="dark" content="上传预习报告" placement="top" :enterable="false">
                <el-button type="danger" icon="el-icon-upload"
                           size="small"></el-button>
              </el-tooltip>
              </el-upload>
              <el-upload class="upload-demo"
                :action="acceptanceUploadUrl"
                :data="{experId: scope.row.experId}"
                :headers="headers"
                :before-upload="beforeUpload"
                :on-success="onSuccess"
                :show-file-list="false"
                :file-list="acceptanceFileList">
              <el-tooltip effect="dark" content="上传验收文件" placement="top" :enterable="false">
                <el-button type="success" icon="el-icon-upload" size="small"></el-button>
              </el-tooltip>
              </el-upload>
              <el-upload class="upload-demo"
               :action="reportUploadUrl"
               :data="{experId: scope.row.experId}"
               :headers="headers"
               :before-upload="beforeUpload"
               :on-success="onSuccess"
               :show-file-list="false"
               :file-list="reportFileList">
              <el-tooltip effect="dark" content="上传实验报告" placement="top" :enterable="false">
                <el-button type="warning" icon="el-icon-upload" size="small"></el-button>
              </el-tooltip>
              </el-upload>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectedCourseId: '',
      studentCourseList: [],
      courseExperimentList: [],
      previewFileList: [],
      acceptanceFileList: [],
      reportFileList: [],
      // 三类文件上传的url
      previewUploadUrl: 'http://139.196.238.103:10084/uploadPreview',
      acceptanceUploadUrl: 'http://139.196.238.103:10084/uploadAcceptance',
      reportUploadUrl: 'http://139.196.238.103:10084/uploadReport',
      // 上传文件同时携带token
      headers: {
        Authorization: window.sessionStorage.getItem('token')
      }
    }
  },
  async created () {
    await this.getStudentCourseList()
    await this.getCourseExperimentList()
  },
  methods: {
    async getStudentCourseList () {
      const { data: res } = await this.$http.post('/queryStuCourse')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取课程信息失败' + res.data.msg)
      const studentCourseList = res.data
      this.studentCourseList = studentCourseList.data
      this.selectedCourseId = this.studentCourseList[0].courseId
    },
    async getCourseExperimentList () {
      const { data: res } = await this.$http.post('/queryStudentExperiment', { courseId: this.selectedCourseId })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取实验信息失败' + res.data.msg)
      const courseExperimentList = res.data
      this.courseExperimentList = courseExperimentList.data
    },
    beforeUpload () {
      return this.$confirm('将会覆盖已上传的文件，确定要上传吗？')
    },
    async onSuccess (res) {
      this.$message.success(res.data.msg)
      await this.getCourseExperimentList()
    }
  }
}
</script>

<style scoped>
.upload-demo {
  display: inline-block;
  margin-right: 10px
}
</style>
